<template>
    <div
        class="riskvalidate"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="风险业务动态身份验证">
            <template slot="cardBody">
                <div class="pageTips">
                    <div class="leftBox">
                        <p>
                            <span :style="{display: 'inline-block', width: '150px'}">风险验证级别：</span>
                            {{riskleveldesc}}
                        </p>
                        <p>
                            <span :style="{display: 'inline-block', width: '150px'}">提示：</span>
                            {{riskitem1}}
                        </p>
                        <p>
                            <span :style="{display: 'inline-block', width: '150px'}"></span> 必核项答错一个则不再继续身份核实，选核项累计答错2个则不再继续身份核实。
                        </p>
                    </div>
                    <div class="rightBox">
                        <!-- <el-button
                            type="primary"
                            size="small"
                            @click="handlePass"
                            :disabled="passFlag"
                        >通 过</el-button>-->
                    </div>
                </div>
                <div class="box-group businessIndex">
                    <p class="title">必核项</p>
                    <div class="content">
                        <el-row>
                            <el-col :span="8">
                                <p>
                                    <span>证件号码：</span>
                                    {{customerInfo_3002.CUSTID}}
                                </p>
                                <p>
                                    <span>卡片有效期：</span>
                                    {{cardInfo_3004.EXPIRE}}
                                </p>
                            </el-col>
                            <el-col :span="8">
                                <p>
                                    <span>卡号：</span>
                                    {{cardInfo_3004.CARDNO}}
                                </p>
                                <p>
                                    <span>手机号码：</span>
                                    {{customerInfo_3002.MOBILEPHONE}}
                                </p>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="box-group businessIndex">
                    <p class="title">A类选核项</p>
                    <div class="content">
                        <el-row>
                            <el-col :span="8">
                                <p>
                                    <span>客户预留问题：</span>
                                    {{customerInfo_3002.RESERVE}}
                                </p>
                                <p>
                                    <span>账单地址：</span>
                                    {{stmtaddress}}
                                </p>
                            </el-col>
                            <el-col :span="8">
                                <p>
                                    <span>客户预留问题答案：</span>
                                    {{customerInfo_3002.RESERVE2}}
                                </p>
                                <p>
                                    <span>联系人姓名：</span>
                                    {{customerInfo_3002.CONNAME1}}
                                </p>
                            </el-col>
                            <el-col :span="8">
                                <p>
                                    <span>卡片额度：</span>
                                    {{cardInfo_3004.CRDLIMT}}
                                </p>
                            </el-col>
                        </el-row>
                    </div>

                    <div class="content">
                        <el-table
                            class="heard-bg business_table"
                            stripe
                            :data="result3011"
                            width="100%"
                            border
                            highlight-current-row
                        >
                            <el-table-column label="未出账单明细">
                                <el-table-column
                                    label="交易日期时间"
                                    show-overflow-tooltip
                                    min-width="120"
                                >
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.PURTIME | getFormatDate(scope.row.VALDATE+'', scope.row.PURDATE1+'') }}</span>
                                    </template>
                                </el-table-column>

                                <el-table-column label="记账日" min-width="75">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.PURDATE | formatDate}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="交易描述" show-overflow-tooltip min-width="200">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.DESLINE1 || ""}} &nbsp; {{scope.row.DESLINE2 || ""}}</span>
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column label="交易类型" prop="TRANTYPE_1" min-width="150"></el-table-column>
                                <el-table-column label="商户类型代码" prop="MCC" min-width="75"></el-table-column>-->
                                <el-table-column label="交易金额" show-overflow-tooltip min-width="100">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.AMOUNT |formatAmount(scope.row.AMTFLAG)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="授权号码" show-overflow-tooltip min-width="100">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.AUTHCODE }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="交易流水号" prop="TRANNO" min-width="60"></el-table-column>
                                <el-table-column label="卡号末四位" min-width="68">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.CARDEND | formatCardend}}</span>
                                    </template>
                                </el-table-column>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="box-group businessIndex">
                    <p class="title">B类选核项</p>
                    <div class="content">
                        <el-row>
                            <el-col :span="8">
                                <p>
                                    <span>自扣还款方式：</span>
                                    {{CardBill_3005.PAYFALG | PAYFALG_filter}}
                                </p>
                                <p>
                                    <span>账单日：</span>
                                    {{cardAccountInfo_3001.CYCLNBR}}日
                                </p>
                            </el-col>
                            <el-col :span="8">
                                <p>
                                    <span>电子邮箱：</span>
                                    {{customerInfo_3002.EMAIL}}
                                </p>
                                <p>
                                    <span>住宅电话：</span>
                                    {{customerInfo_3002.HOMEPHONE}}
                                </p>
                            </el-col>
                            <el-col :span="8">
                                <p>
                                    <span>账单地址类型：</span>
                                    {{customerAdressInfo_3003.STSMAIL|STMTP_filter}}
                                </p>
                                <p>
                                    <span>单位地址：</span>
                                    {{compaddress}}
                                </p>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="box-group businessIndex">
                    <p class="title">C类选核项</p>
                    <div class="content">
                        <el-row>
                            <el-col :span="8">
                                <p>
                                    <span>住宅地址：</span>
                                    {{homeaddress}}
                                </p>
                                <p>
                                    <span>姓名汉字：</span>
                                    {{customerInfo_3002.CHINAME}}
                                </p>
                            </el-col>
                            <el-col :span="8">
                                <p>
                                    <span>单位电话：</span>
                                    {{customerInfo_3002.BUSIPHONE}}
                                </p>
                            </el-col>
                            <el-col :span="8">
                                <p>
                                    <span>单位名称：</span>
                                    {{customerInfo_3002.BUSINAME}}
                                </p>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import moment from 'moment';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import applyList from './components/applyList.vue';
import contactList from './components/contactList.vue';
import supplementCardList from './components/supplementCardList.vue';
import { getDictSelectList } from '@/utils/Common';

export default {
    name: 'riskvalidate',
    components: {
        cardComponent,
        'apply-list': applyList,
        'contact-list': contactList,
        'supplement-card-list': supplementCardList,
    },

    data() {
        return {
            pageLoading: false, // 页面loading
            passFlag: true, // 通过按钮 禁用标志
            allMustQuestion: [], // 必核项题库
            allQuestionA: [], // A类题库
            allQuestionB: [], // B类题库
            mustQuestion: [], // 页面展示必核项问题
            questionA: [], // 页面展示的A类问题
            questionB: [], // 页面展示的B类问题
            idTypeList: [], // 证件类型列表
            cardstatList: [],
            stmtaddress: '',//账单地址
            compaddress: '',//公司地址
            homeaddress: '',//家庭地址
            result3011: [],//未出账单明细列表
            RTNIND: '',
            VALDATE: '',
            PURDATE: '',
            PURTIME: '',
            TRANNO: '',
            riskLevel: '',//菜单风险级别
            riskitemsList: [],
            riskitem1: '',
            riskitem2: '',
            riskleveldesc: '',

        };
    },

    mounted() {
        this.init();
    },

    // 取缓存信息
    computed: mapState({
        cardAccountInfo_3001: state => state.common.cardAccountInfo_3001, // 卡账户信息
        customerInfo_3002: state => state.common.customerInfo_3002, // 客户信息
        customerAdressInfo_3003: state => state.common.customerAdressInfo_3003, // 客户地址信息
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        cardList_3601: state => state.common.cardList_3601, // 可列表信息
        3014: state => state.common.CreditCardService_3014, // 信用卡服务方式综合查询
        CardBill_3005: state => state.common.CardBill_3005, // 信用卡账单信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        checkData: state => state.common.checkData, // 检查验证标记字段
        checAllData: state => state.common.checAllData, // 检查验证标记字段
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
    }),

    filters: {
        getFormatValue(val, list) {
            let text = '';
            if (val && val.trim()) {
                list.forEach((item) => {
                    if (item.code === val.trim()) {
                        text = item.label;
                    }
                });
            }
            return text;
        },

        filterCardstat: (value, cardstatList) => {
            value = (`${value}`).trim();
            let txt = '';

            for (let index = 0; index < cardstatList.length; index++) {
                const element = cardstatList[index];
                if (element.code === value) {
                    txt = element.label;
                }
            }
            if (value === '') {
                txt = '正常';
            }
            return txt;
        },
        STMTP_filter: (value) => {
            value = (`${value}`).trim();
            switch (value) {
                case 'H':
                    return '家庭地址';
                    break;
                case 'B':
                    return '公司地址';
                    break;
                default:
                    break;
            }
        },
        PAYFALG_filter: (value) => {
            value = (`${value}`).trim();
            switch (value) {
                case 'F':
                    return '固定金额';
                    break;
                case 'M':
                    return '最小还款额';
                    break;
                case 'T':
                    return '全额还款';
                    break;
                case 'P':
                    return '按百分比还款';
                    break;
                default:
                    break;
            }
        },
        // 获取日期时间转换
        getFormatDate(time, date, date1) {
            let res = '';
            let str = '';
            let tmp = '';
            const timeStr = time.toString().trim();
            if (date !== 0) {
                tmp = `00000000${timeStr}`;
                tmp = tmp.substring(tmp.length - 8, tmp.length);
                str = tmp.substring(0, 2).concat(':').concat(tmp.substring(2, 4)).concat(':')
                    .concat(tmp.substring(4, 6));
            }
            let Str = '';
            if (date) {
                const dateStr = date.toString().trim();
                const month1 = Number(date1.substring(0, 2));
                const month2 = Number(dateStr.substring(4, 6));
                if (month1 - month2 === 11) {
                    const year = `${Number(dateStr.substring(0, 4)) - 1}`;
                    Str = year.concat('-').concat(date1.substring(0, 2)).concat('-').concat(date1.substring(2, 4));
                } else {
                    Str = dateStr.substring(0, 4).concat('-').concat(date1.substring(0, 2)).concat('-')
                        .concat(date1.substring(2, 4));
                }

                res = `${Str} ${str}`;
            }
            return res;
        },
        // 卡号末四位自动补0
        formatCardend(val) {
            return val.toString().padStart(4, '0');
        },
        // 日期格式转换
        formatDate(val) {
            const text = `${val}`;
            return moment(text).format('YYYY-MM-DD');
        },
        //格式化交易金额，加上交易金额符号，精确小数点后2位小数
        formatAmount(amt, flag) {
            if (flag === '-') {
                amt = parseFloat(-1.00 * amt).toFixed(2);
            } else {
                amt = parseFloat(1.00 * amt).toFixed(2);
            }
            return amt;
        },
    },

    methods: {
        // 初始化查询
        async init() {
            //获取菜单风险级别
            //this.riskLevel = this.$route.params.riskLevel;
            this.riskLevel = 'RISKLEVEL_HIGH';//high-高风险，medium-中风险，low-低风险
            this.riskleveldesc = '高风险业务验证';
            this.riskitemsList = await getDictSelectList('RISKLEVEL_HIGH', this);
            this.riskitem1 = this.riskitemsList[0].label;
            this.riskitem2 = this.riskitemsList[1].label;
            // 证件类型列表
            this.idTypeList = await getDictSelectList('IDTYPE', this);

            this.cardstatList = await getDictSelectList('CLOCD', this);

            await this.get3011();
            this.homeaddress = this.stmtaddress = this.customerAdressInfo_3003.ADD11.trim() + this.customerAdressInfo_3003.ADD12.trim() + this.customerAdressInfo_3003.ADD13.trim() + this.customerAdressInfo_3003.ADD14.trim() + this.customerAdressInfo_3003.ADD15.trim();
            this.compaddress = this.customerAdressInfo_3003.ADD11.trim() + this.customerAdressInfo_3003.ADD12.trim() + this.customerAdressInfo_3003.ADD13.trim() + this.customerAdressInfo_3003.ADD14.trim() + this.customerAdressInfo_3003.ADD15.trim();

            if (this.customerAdressInfo_3003.STSMAIL + '' === 'H') {
                this.stmtaddress = this.homeaddress;
            } else if (this.customerAdressInfo_3003.STSMAIL + '' === 'B') {
                this.stmtaddress = this.compaddress;
            }
            console.log("this.stmtaddress", this.stmtaddress);
            // 中风险A类问题
            // this.allQuestionA = await getDictSelectList('M_QUESTION_A', this);
            // this.questionA = this.getRandomQuestion(true, this.allQuestionA, 5);

            // 中风险B类问题
            // this.allQuestionB = await getDictSelectList('M_QUESTION_B', this);
            // this.questionB = this.getRandomQuestion(true, this.allQuestionB, 4);

            // 中风险必核项问题
            // this.allMustQuestion = await getDictSelectList('M_QUESTION_MUST', this);
            // this.mustQuestion = this.getRandomQuestion(false, this.allMustQuestion, 3);
        },

        // 从题库中随机筛选 count 个问题
        getRandomQuestion(isRandom, list, count) {
            const resArr = [];
            if (isRandom) {
                // 获取随机数 数组（0 - list.length-1)
                const indexArr = this.getRandomArray(count, list.length, []);
                // 遍历随机数 获取对应下标问题
                indexArr.forEach((item) => {
                    list[item].checkFlag = false;
                    list[item].text = this.getQuestionValue(list[item].code);
                    resArr.push(list[item]);
                });
            } else {
                list.forEach((item) => {
                    item.checkFlag = false;
                    item.text = this.getQuestionValue(item.code);
                    resArr.push(item);
                });
            }
            return resArr;
        },

        // 生成 count 个 0 - max 的随机数
        getRandomArray(count, max, randomArr) {
            // 生成（0 - max-1 的随机数）
            const num = Math.floor(Math.random() * max);
            // 判断随机数数组中是否已存在此随机数 不存在则添加
            if (randomArr.indexOf(num) === -1) {
                randomArr.push(num);
            }
            // 判断随机数数组长度是否满足需求长度， 不满足则继续添加
            if (randomArr.length < count) {
                return this.getRandomArray(count, max, randomArr);
            }
            return randomArr;
        },

        // 获取问题对应字段的值
        getQuestionValue(val) {
            let text = '';
            let arr;
            if (val && val.trim()) {
                arr = val.split('.');
                if (this[arr[0]]) {
                    if (val === '3003.ADD1') { // 家庭地址
                        text = this[3003].ADD11 + this[3003].ADD12 + this[3003].ADD13 + this[3003].ADD14 + this[3003].ADD15;
                    } else if (val === '3003.ADD2') { // 公司地址
                        text = this[3003].ADD21 + this[3003].ADD22 + this[3003].ADD23 + this[3003].ADD24 + this[3003].ADD25;
                    } else if (val === '3014.ADD') { // 账单地址
                        text = this[3014].ADD1 + this[3014].ADD2 + this[3014].ADD3 + this[3014].ADD4 + this[3014].ADD5;
                    } else {
                        text = this[arr[0]][arr[1]];
                    }
                } else if (val === 'ATTACHEDCARD') {
                    text = this.handleJudgeCard();
                }
            }
            return text;
        },

        // 3077分期付款交易明细查询
        async get3011(type) {

            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', //卡号
                PINFLAG: '0', // 是否检查密码标志
                RTNIND: this.RTNIND, // 翻页标志 首次传空， 翻页传1
                PIN: '',
                OPTION: 'A', // 币种选项 L:第一币种 I:第二币种 A:所有币种
                VALDATE: this.VALDATE,
                PURDATE: this.PURDATE,
                PURTIME: this.PURTIME,
                TRANNO: this.TRANNO,
                ENQFLAG: 0,
                ORDERFLAG: 0,
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3011';
            defaultParams.body.appBody = appBody;
            // 3077交易

            await this.$post.common.transPort(defaultParams).then(async (res) => {
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') {
                        this.result3011.push(...result.body.appBody.dataList);

                        // if (result.body.appBody.RTNIND === '1') {
                        //     this.NEXTDAY_3077 = result.body.appBody.dataList[result.body.appBody.dataList.length - 1].BEGYM;
                        //     this.NEXTMPNO_3077 = result.body.appBody.dataList[result.body.appBody.dataList.length - 1].MPNO;
                        //     // 修改翻页标志 
                        //     this.RtnindFlag3077 = result.body.appBody.RTNIND
                        //     await this.get3077();

                        // } else {
                        //     console.log(' this.resultlist3077——数据接收到了', this.resultlist3077);
                        //     this.tableData3077 = await this.resultlist3077.filter((item) => item.MPTYPE != 'W');
                        //     console.log("this.tableData3077_1", this.tableData3077);
                        // }
                    } else {

                    }
                } else {

                }
            });
        },
        // 判断是否有
        handleJudgeCard() {
            let text = '否';
            let flag = false;
            this.cardList_3601.forEach((item) => {
                if ((`${item.MAFLAG}`).trim() !== '1') { // 1=主卡，2-9=附卡
                    flag = true;
                }
            });
            if (flag) { // 有附卡
                text = '是';
            }
            return text;
        },

        // 复选框change事件
        handleChange(e, list, index) {
            this[list][index].checkFlag = e;
            const arr1 = this.mustQuestion.filter(item => item.checkFlag);
            const arr2 = this.questionA.filter(item => item.checkFlag);
            const arr3 = this.questionB.filter(item => item.checkFlag);
            if (arr1.length === 3 && arr2.length >= 3 && arr3.length >= 3) {
                this.passFlag = false;
            } else {
                this.passFlag = true;
            }
        },

        // 点击通过
        handlePass() {
            // let checkData = JSON.parse(JSON.stringify(this.checkData))
            // checkData.authenticationFla_M = true
            // this.$store.commit('UPDATE_CHECK_FLA G', checkData)
            // 修改高风险验证开关通过
            this.checAllData.high.falg = true;
        },
    },
};
</script>

<style lang="scss">
.riskvalidate {
    margin: 20px 16px 30px;

    .el-table {
        position: relative;
        overflow: hidden;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 100%;
        max-width: 100%;
        font-size: 12px;
        color: #606266;
    }

    .pageTips {
        padding-bottom: 20px;
        padding-top: 10px;
        color: red;
        overflow: hidden;

        .leftBox {
            float: left;
            max-width: 85%;
            p {
                height: 20px;
                line-height: 20px;
                margin-bottom: 10px;
            }
        }
        .rightBox {
            float: right;
            width: 15%;
            text-align: center;
        }
    }
    .box-card {
        margin-bottom: 20px;
        background-color: #f2f6fb;

        .clearfix {
            text-align: center;
        }

        .container {
            .questionItem {
                margin-bottom: 20px;
                .title {
                    padding-right: 10px;
                    display: inline-block;
                    text-align: right;
                    width: 130px;
                }
            }
            .footer {
                margin-top: 20px;
                text-align: right;
            }
        }
    }
    .box-group .content p {
        color: #000;
        font-size: 12px;
        text-align: left;
        span {
            text-align: right;
            display: inline-block;
            width: 32%;
            margin-right: 4px;
        }
    }
}
</style>
